<template>
  <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys="[title]">
        <a-menu-item key="首页">
          <router-link to="/home">
            <a-icon type="user" />
            <span>首页</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="订单列表">
          <router-link to="/orderList">
            <a-icon type="video-camera" />
            <span>订单列表</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="价格列表">
          <router-link to="/priceList">
            <a-icon type="upload" />
            <span>价格列表</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      title: state => state.menu.title,
      collapsed: state => state.menu.collapsed
    })
  }
}
</script>

<style lang="scss" scoped>
  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
</style>
